<template>
  <div class="index">


    <div class="detail">
      <h2>盘点详情</h2>
      <el-descriptions title="" :column="2" :border='true' class="tab" :contentStyle="CS">
        <el-descriptions-item label="名称">{{ result.name }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ result.date }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ result.state }}</el-descriptions-item>
        <el-descriptions-item label="源单据">{{ result.origin }}</el-descriptions-item>
        <!-- <el-descriptions-item label="公司id">{{ result.companyId }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="位置id">{{ result.locationId }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="productId">{{ result.productId }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="包装id">{{ result.packageId }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="合作伙伴id">{{ result.partnerId }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="Inventoried Lot/Serial Number">{{ result.lotId }}</el-descriptions-item> -->
        <!-- <el-descriptions-item label="Inventory of">{{ result.filter }}</el-descriptions-item>
              <el-descriptions-item label="Inventoried Category">{{ result.categoryId }}</el-descriptions-item>
              <el-descriptions-item label="Include Exhausted Products">{{ result.exhausted }}</el-descriptions-item>
              <el-descriptions-item label="创建者id">{{ result.createUid }}</el-descriptions-item>
              <el-descriptions-item label="创建日期">{{ result.createDate }}</el-descriptions-item>
              <el-descriptions-item label="更新者id">{{ result.writeUid }}</el-descriptions-item>
              <el-descriptions-item label="更新日期">{{ result.writeDate }}</el-descriptions-item>
              <el-descriptions-item label="Force Accounting Date">{{ result.accountingDate }}</el-descriptions-item>
              <el-descriptions-item label="源单据">{{ result.origin }}</el-descriptions-item>
              <el-descriptions-item label="到期日期">{{ result.arrivalDate }}</el-descriptions-item>
              <el-descriptions-item label="Package Num">{{ result.packageNum }}</el-descriptions-item>
              <el-descriptions-item label="销售订单">{{ result.saleOrderId }}</el-descriptions-item> -->

      </el-descriptions>
      <!-- 合计show-summary -->
      <h2>盘点细节</h2>
      <el-table height="250" :data="tableData" style="width: 90%;margin: -15px auto;"
        :header-cell-style="{ background: '#f8f8f9', color: 'black' }">

        <el-table-column prop="productName" label="产品">
          <template slot-scope="scope">
            <div @click="stockdetail(scope.row)">
              <a href="javascript:;">{{ scope.row.productName }}</a>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="locationName" label="位置" >
              </el-table-column> -->
        <el-table-column prop="theoreticalQty" label="理论数量">
        </el-table-column>
        <el-table-column prop="handleNum" label="操作数量">
        </el-table-column>
        <el-table-column prop="productQty" label="实际数量">
        </el-table-column>





      </el-table>

      <div class="total">
        <!-- <div class="totalright">
                  <p>总计：<strong>￥{{ amountTotal }}</strong></p>
              <p>金额大写：<strong>{{ amountTotalDaxie }}</strong></p>
              </div> -->
      </div>

    </div>
    <!-- 库存详情弹框 -->
    <div v-if="showStockCD">
      <el-dialog :visible.sync="openStock" width="1500px" append-to-body :destroy-on-colse="true" @close='closeDialog'>
        <Stockdetail :fid="stockid"></Stockdetail>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { listInventory, getInventory, delInventory, addInventory, updateInventory } from "@/api/system/inventory";

export default {
  data() {
    return {
      // 是否显示弹框，用来解决第二次弹框组件内容没变化的问题
      showStockCD: true,
      // 传给库存详情页的id
      stockid: null,
      // 库存详情弹框
      openStock: false,
      // 列表描述单元格的样式
      CS: {
        //   'text-align': 'center',  //文本居中
        'max-width': '280px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 列表详情
      result: {},
      // 产品订单行表格
      tableData: [],
      //操作详情表格
      tableData2: [],
      // 供应商信息
      result2: {},
      // 总价
      amountTotal: 0,
      // 大写
      amountTotalDaxie: '零',
    };
  },
  mounted() {
    // 通过$route.query将传过来的值接收;
    let id = this.$route.query.listId;
    // this.tableData = this.$route.query.manageList;
    this.getList(id);
    // this.getsupplier(id)
  },
  methods: {
    // 列表详情
    getList(id) {
      getInventory(id).then(res => {
        // console.log(res);
        this.result = res.data
        this.tableData = res.data.stockInventoryLines
      })
    },
    // 点击产品名称弹出详情
    stockdetail(row) {
      // console.log(row)
      this.showStockCD = true
      this.stockid = row.productTemplateId
      this.openStock = true

    },
    // 关闭弹框的时候销毁内容  再次点击重新创建
    closeDialog() {
      this.showStockCD = false
    },

  },
  components: {
    Stockdetail: () => import('@/views/system/stockdetail/index.vue')
  },
  props: {},
  watch: {},
  computed: {},
  created() { },
};
</script>
<style lang="scss"  scoped>
* {
  margin: 0;
  padding: 0;
}

.index {
  // background: #f9f9f9;
  border: 1px transparent solid;


}

h2 {
  text-align: center;
  line-height: 80px;
}


.detail {
  background: #fff;
  border: 1px rgb(232, 228, 228) solid;
  // box-shadow: 0 3px 20px -15px #000000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px auto;
  width: 80%;

  .tab {
    width: 90%;
    margin: 20px auto;
  }

  .line {
    margin: 30px auto;
    // border: 1px rgb(224, 17, 17) solid;
    padding: 10px;
    height: 20px;
  }

  .total {

    // border: 1px red solid;
    width: 90%;
    margin: 50px auto;

    // margin: 40px 60% 30px;
    // border-top: 2px gray solid;
    // text-align:right;
    .totalright {
      width: 30%;
      // float: right;
      margin-left: 70%;
      border-top: 2px gray solid;

      p {
        line-height: 40px;
        text-align: right;
      }
    }

  }



}

.product {
  width: 80%;
  background: #fff;
  border: 1px rgb(232, 228, 228) solid;
  // box-shadow: 0 3px 20px -15px #000000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px auto;
}

.my-content {
  background: #1f1e1e;
}


::v-deep .el-descriptions-item__label.is-bordered-label {
  font-weight: bold;
  color: #6d6a6a;
  background: #f8f8f9;
}</style>